<template>
  <div class="c-tags inline">
    <a-tag
      v-for="(item, idx) in data"
      :key="idx"
      :color="item.color || getRandomColor()"
    >
      {{ item.hasOwnProperty("label") ? item.label : item }}
    </a-tag>
  </div>
</template>

<script>
import { random } from "@/util/common";

// const colors = ["#19be6b", "#ff9900", "#ed4014", "#909399", "#4d65fd"];
const colorGroup = ["red", "orange", "green", "blue"];

export default {
  props: {
    // 渲染的数据
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否生成随机颜色
    randomColor: {
      type: Boolean,
      default: false
    },
    // 颜色数组
    colorGroup: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    // 获取随机颜色
    getRandomColor() {
      let c;
      if (this.randomColor) {
        let colors = this.colorGroup.length ? this.colorGroup : colorGroup;
        c = colors[random(0, colors.length)];
      } else if (this.colorGroup.length !== 0) {
        c = this.colorGroup[0];
      } else {
        c = null;
      }
      return c;
    }
  }
};
</script>
